import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";

import Item from "./item";

// less
import "./box.less";

export default class Box extends Component {
  static Item = Item;
  constructor(props) {
    super(props);
  }
  render() {
    const { cols, children, lineCamp } = this.props;
    const items = React.Children.map(children, ele => React.cloneElement(ele));
    const percents = 1 / (cols || 1) * 100 + "%";
    const cls = cx('box-container', {
      lineCamp: !!lineCamp,
    });
    return (
      <div className={cls}>
        {items &&
          items.map(item => (
            <div
              key={item.key}
              style={{
                width: percents,
                display: "inline-block",
                float: "left"
              }}
            >
              {item}
            </div>
          ))}
      </div>
    );
  }
}
Box.propTypes = {
  cols: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  children: PropTypes.any
};
